<template>
  <div>
    <!-- 1. 顶部导航栏 -->
    <div class="topbar">
      <img src="@/assets/images/logo.png" alt="">
      <van-search backgroud="#fff" v-model="inputValue" placeholder="搜您喜欢的..." @focus="goSearch" />
      <div class="chat"><i class="iconfont icon-kefu1"></i></div>
    </div>

    <!-- 2. 滑动导航栏 -->
    <ly-tabs v-model="lytabValue" class="lytabs" activeColor="#ff0000">
      <ly-tab-item :name="item.name" :title="item.title" v-for="(item, index) in lytabsData" :key="index" />
    </ly-tabs>

    <scroll class="content">
      <!-- 3. 轮播图 -->
      <van-swipe :autoplay="2000" class="swiper">
        <van-swipe-item>
          <img src="@/assets/images/swiper/swiper1.jpeg" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/images/swiper/swiper2.jpeg" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/images/swiper/swiper3.jpeg" />
        </van-swipe-item>
      </van-swipe>
      <!-- 4. 分类推荐 -->
      <icons :iconsData="iconsData"></icons>

      <!-- 5. 新闻播放 -->

      <van-row class="news">
        <van-col :span="5" class="news-title"><img src="@/assets/images/news.png" alt=""></van-col>
        <van-col :span="19">
          <van-notice-bar :scrollable="false" class="news-item" background="#fff" color="#000">
            <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
              <van-swipe-item>重要公告 | 真伪客服官方验证功能上线</van-swipe-item>
              <van-swipe-item>岩茶为何不提春茶概念？</van-swipe-item>
            </van-swipe>
          </van-notice-bar>
        </van-col>
      </van-row>

      <!-- 6. 小七推荐 -->
      <div class="recommend">
        <center-text><span>小七推荐</span></center-text>
        <div class="recommend-item">
          <div>
            <a href="https://m.tea7.com/zhuanti/hd/fuligou?comefrom=index">
              <img src="@/assets/images/tea-recommend/t1.png" alt="">
            </a>
          </div>
          <div>
            <a href="https://m.tea7.com/zhuanti/hd/yueyuegou?comefrom=index">
              <img src="@/assets/images/tea-recommend/t2.png" alt="">
            </a>
          </div>
        </div>
      </div>
      <!-- 7. 推荐 -->
      <recommend></recommend>
      <!-- 8. 猜你喜欢 -->
      <center-text class="like"><span>猜你喜欢</span></center-text>
      <good-list :goodList="goodList"></good-list>

    </scroll>
  </div>
</template>

<script>
import CenterText from '@/components/content/home/CenterText.vue'
import { LyTabs, LyTabBar, LyTabItem } from 'ly-tab'
import Scroll from '@/components/common/Scroll.vue'
import Icons from '@/components/content/home/Icons.vue'
import Recommend from '@/components/content/home/Recommend.vue'
import GoodList from '@/components/content/home/GoodList.vue'
import { getLikeData } from '@/network/api/home'
export default {
  name: "home",
  components: {
    CenterText,
    LyTabs,
    LyTabBar,
    LyTabItem,
    Scroll,
    Icons,
    Recommend,
    GoodList
  },
  data() {
    return {
      inputValue: '',
      lytabValue: 0,
      lytabsData: [
        {
          title: '推荐',
          name: 0
        }, {
          title: '金骏眉',
          name: 1
        }, {
          title: '武夷岩茶',
          name: 2
        }, {
          title: '紫砂茶',
          name: 3
        },
        {
          title: '龙井茶',
          name: 4
        },
        {
          title: '茉莉花茶',
          name: 5
        },
      ],
      iconsData: [
        {
          title: '自饮',
          image: require('@/assets/images/icons/icon1.png')
        },
        {
          title: '茶具',
          image: require('@/assets/images/icons/icon2.png')
        },
        {
          title: '品牌',
          image: require('@/assets/images/icons/icon3.png')
        },
        {
          title: '赛事',
          image: require('@/assets/images/icons/icon4.png')
        },
        {
          title: '新人礼',
          image: require('@/assets/images/icons/icon5.png')
        },
      ],
      goodList: []
    }
  },
  methods: {
    goSearch() {
      this.$router.push('/search')
    }
  },
  async created() {
    const res = await getLikeData()
    this.goodList = Object.freeze(res.data)
  }
}
</script>

<style lang='less' scoped>
.topbar {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 49px;
  background-color: #b0352f;

  img {
    width: 65px;
    margin: 0 8px;
  }

  .chat {
    margin: 0 13px
  }

  .iconfont {
    font-size: 30px;
    color: #fff;
  }

  .van-search {
    width: 280px;
    padding: 0;
    border-radius: 50px;
  }

  .van-search__content {
    padding: 0;
    background-color: #fff;
    border-radius: 15px;
  }

  /deep/ .van-field__left-icon .van-icon,
  .van-field__right-icon .van-icon {
    font-size: 22px;
    color: #ccc;
    margin: 0 5px;
  }
}

.lytabs {
  font-weight: 400;
  font-size: 14px;
  border: none;

  /deep/ .ly-tabs__tab-list {
    position: fixed;
    top: 49px;
    height: 55px;
  }

}


.content {
  position: absolute;
  overflow: hidden;
  top: 104px;
  bottom: 50px;
  left: 0;
  right: 0;

  .news {
    background-color: #fff;
    height: 40px;
    padding: 15px 0 0 0;
    margin-bottom: 13px;
    border-top: 1px solid #f6f6f6;

    .news-title {
      padding: 0 0 0 10px;

      img {
        width: 100%;
      }
    }

    .notice-swipe {
      height: 40px;
      line-height: 20px;
    }

    .van-swipe-item {
      font-size: 14px;
      background-color: #fff;
    }
  }

  .swiper {
    img {
      height: 170px;
    }
  }

  .recommend {
    padding: 3px 5px 15px 5px;
    background-color: #fff;

    .recommend-item {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;

      div {
        width: 48%;

        img {
          width: 100%;
        }
      }
    }
  }

  .like {
    padding: 15px 0;
  }
}
</style>